var myChart = echarts.init(document.querySelector(".grade .chart"));
const uploadedDataURL = 'https://www.makeapie.com/asset/get/s/data-1635390802457-HRSoVX4EN.json';

var aqiData = {
    "now": {
        "primary": "PM2.5",
        "aqi": 58,
        "details": {
            "now": {
                "co": "1.1",
                "o3": "11",
                "aqi": "58",
                "no2": "55",
                "so2": "11",
                "pm10": "57",
                "level": "2",
                "pm2p5": "41",
                "primary": "PM2.5",
                "pubTime": "2021-10-19T08:00+08:00",
                "category": "良"
            },
            "station": [
                {
                    "co": "1.1",
                    "id": "CNA3431",
                    "o3": "6",
                    "aqi": "71",
                    "no2": "61",
                    "so2": "8",
                    "name": "高铁新城",
                    "pm10": "91",
                    "level": "2",
                    "pm2p5": "44",
                    "primary": "PM10",
                    "pubTime": "2021-10-19T08:00+08:00",
                    "category": "良"
                },
                {
                    "co": "1.0",
                    "id": "CNA3425",
                    "o3": "18",
                    "aqi": "50",
                    "no2": "50",
                    "so2": "6",
                    "name": "越秀幼儿园",
                    "pm10": "50",
                    "level": "1",
                    "pm2p5": "31",
                    "primary": "NA",
                    "pubTime": "2021-10-19T08:00+08:00",
                    "category": "优"
                },
                {
                    "co": "1.0",
                    "id": "CNA3290",
                    "o3": "31",
                    "aqi": "49",
                    "no2": "28",
                    "so2": "14",
                    "name": "木渎中学",
                    "pm10": "49",
                    "level": "1",
                    "pm2p5": "32",
                    "primary": "NA",
                    "pubTime": "2021-10-19T08:00+08:00",
                    "category": "优"
                },
                {
                    "co": "0.9",
                    "id": "CNA1167",
                    "o3": "7",
                    "aqi": "54",
                    "no2": "69",
                    "so2": "16",
                    "name": "相城区",
                    "pm10": "54",
                    "level": "2",
                    "pm2p5": "38",
                    "primary": "PM2.5",
                    "pubTime": "2021-10-19T08:00+08:00",
                    "category": "良"
                },
                {
                    "co": "1.3",
                    "id": "CNA1166",
                    "o3": "4",
                    "aqi": "59",
                    "no2": "60",
                    "so2": "14",
                    "name": "苏州工业园区",
                    "pm10": "52",
                    "level": "2",
                    "pm2p5": "42",
                    "primary": "PM2.5",
                    "pubTime": "2021-10-19T08:00+08:00",
                    "category": "良"
                },
                {
                    "co": "1.3",
                    "id": "CNA1165",
                    "o3": "14",
                    "aqi": "79",
                    "no2": "54",
                    "so2": "14",
                    "name": "苏州新区",
                    "pm10": "48",
                    "level": "2",
                    "pm2p5": "58",
                    "primary": "PM2.5",
                    "pubTime": "2021-10-19T08:00+08:00",
                    "category": "良"
                },
                {
                    "co": "1.2",
                    "id": "CNA1164",
                    "o3": "9",
                    "aqi": "65",
                    "no2": "60",
                    "so2": "7",
                    "name": "吴中区",
                    "pm10": "49",
                    "level": "2",
                    "pm2p5": "47",
                    "primary": "PM2.5",
                    "pubTime": "2021-10-19T08:00+08:00",
                    "category": "良"
                },
                {
                    "co": "1.2",
                    "id": "CNA1163",
                    "o3": "1",
                    "aqi": "60",
                    "no2": "57",
                    "so2": "15",
                    "name": "轧钢厂",
                    "pm10": "70",
                    "level": "2",
                    "pm2p5": "31",
                    "primary": "PM10",
                    "pubTime": "2021-10-19T08:00+08:00",
                    "category": "良"
                },
                {
                    "co": "1.3",
                    "id": "CNA1162",
                    "o3": "9",
                    "aqi": "63",
                    "no2": "54",
                    "so2": "9",
                    "name": "彩香",
                    "pm10": "52",
                    "level": "2",
                    "pm2p5": "45",
                    "primary": "PM2.5",
                    "pubTime": "2021-10-19T08:00+08:00",
                    "category": "良"
                },
                {
                    "co": "0.7",
                    "id": "CNA1160",
                    "o3": "13",
                    "aqi": "27",
                    "no2": "41",
                    "so2": "6",
                    "name": "上方山",
                    "pm10": "27",
                    "level": "1",
                    "pm2p5": "16",
                    "primary": "NA",
                    "pubTime": "2021-10-19T08:00+08:00",
                    "category": "优"
                }
            ]
        },
        "aqitime": "2021-10-19 08:00:00"
    },
    "forecast": {
        "2021-09-29": {
            "aqi": 74,
            "data_type": "forecast",
            "aqidate": "2021-09-29",
            "primary": "O3"
        },
        "2021-09-30": {
            "aqi": 74,
            "data_type": "forecast",
            "aqidate": "2021-09-30",
            "primary": "O3"
        },
        "2021-10-01": {
            "aqi": 96,
            "data_type": "forecast",
            "aqidate": "2021-10-01",
            "primary": "O3"
        },
        "2021-10-02": {
            "aqi": 123,
            "data_type": "forecast",
            "aqidate": "2021-10-02",
            "primary": "O3"
        },
        "2021-10-03": {
            "aqi": 91,
            "data_type": "forecast",
            "aqidate": "2021-10-03",
            "primary": "O3"
        },
        "2021-10-04": {
            "aqi": 99,
            "data_type": "forecast",
            "aqidate": "2021-10-04",
            "primary": "O3"
        },
        "2021-10-05": {
            "aqi": 92,
            "data_type": "forecast",
            "aqidate": "2021-10-05",
            "primary": "O3"
        },
        "2021-10-06": {
            "aqi": 68,
            "data_type": "forecast",
            "aqidate": "2021-10-06",
            "primary": "O3"
        },
        "2021-10-07": {
            "aqi": 91,
            "data_type": "forecast",
            "aqidate": "2021-10-07",
            "primary": "O3"
        },
        "2021-10-08": {
            "aqi": 61,
            "data_type": "forecast",
            "aqidate": "2021-10-08",
            "primary": "O3"
        },
        "2021-10-09": {
            "aqi": 51,
            "data_type": "forecast",
            "aqidate": "2021-10-09",
            "primary": "O3"
        },
        "2021-10-10": {
            "aqi": 72,
            "data_type": "forecast",
            "aqidate": "2021-10-10",
            "primary": "PM10"
        },
        "2021-10-11": {
            "aqi": 51,
            "data_type": "forecast",
            "aqidate": "2021-10-11",
            "primary": "O3"
        },
        "2021-10-12": {
            "aqi": 44,
            "data_type": "forecast",
            "aqidate": "2021-10-12",
            "primary": "NA"
        },
        "2021-10-13": {
            "aqi": 43,
            "data_type": "forecast",
            "aqidate": "2021-10-13",
            "primary": "NA"
        },
        "2021-10-14": {
            "aqi": 73,
            "data_type": "forecast",
            "aqidate": "2021-10-14",
            "primary": "O3"
        },
        "2021-10-15": {
            "aqi": 48,
            "data_type": "forecast",
            "aqidate": "2021-10-15",
            "primary": "NA"
        },
        "2021-10-16": {
            "aqi": 41,
            "data_type": "forecast",
            "aqidate": "2021-10-16",
            "primary": "NA"
        },
        "2021-10-17": {
            "aqi": 46,
            "data_type": "forecast",
            "aqidate": "2021-10-17",
            "primary": "NA"
        },
        "2021-10-18": {
            "aqi": 44,
            "data_type": "forecast",
            "aqidate": "2021-10-18",
            "primary": "NA"
        },
        "2021-10-19": {
            "aqi": 44,
            "data_type": "forecast",
            "aqidate": "2021-10-19",
            "primary": "NA"
        },
        "2021-10-20": {
            "aqi": 42,
            "data_type": "forecast",
            "aqidate": "2021-10-20",
            "primary": "NA"
        },
        "2021-10-21": {
            "aqi": 39,
            "data_type": "forecast",
            "aqidate": "2021-10-21",
            "primary": "NA"
        },
        "2021-10-22": {
            "aqi": 48,
            "data_type": "forecast",
            "aqidate": "2021-10-22",
            "primary": "NA"
        },
        "2021-10-23": {
            "aqi": 47,
            "data_type": "forecast",
            "aqidate": "2021-10-23",
            "primary": "NA"
        },
        "2021-10-24": {
            "aqi": 74,
            "data_type": "forecast",
            "aqidate": "2021-10-24",
            "primary": "O3"
        },
        "2021-10-25": {
            "aqi": 96,
            "data_type": "forecast",
            "aqidate": "2021-10-25",
            "primary": "O3"
        },
        "2021-10-26": {
            "aqi": 123,
            "data_type": "forecast",
            "aqidate": "2021-10-26",
            "primary": "O3"
        },
        "2021-10-27": {
            "aqi": 91,
            "data_type": "forecast",
            "aqidate": "2021-10-27",
            "primary": "O3"
        },
        "2021-10-28": {
            "aqi": 99,
            "data_type": "forecast",
            "aqidate": "2021-10-28",
            "primary": "O3"
        },
        "2021-10-29": {
            "aqi": 92,
            "data_type": "forecast",
            "aqidate": "2021-10-29",
            "primary": "O3"
        },
        "2021-10-30": {
            "aqi": 68,
            "data_type": "forecast",
            "aqidate": "2021-10-30",
            "primary": "O3"
        },
        "2021-10-31": {
            "aqi": 91,
            "data_type": "forecast",
            "aqidate": "2021-10-31",
            "primary": "O3"
        },
    },
    "history": {
        "2021-09-29": {
            "aqi": 39,
            "data_type": "history",
            "aqidate": "2021-09-29",
            "primary": "NA"
        },
        "2021-09-30": {
            "aqi": 32,
            "data_type": "history",
            "aqidate": "2021-09-30",
            "primary": "NA"
        },
        "2021-10-01": {
            "aqi": 21,
            "data_type": "history",
            "aqidate": "2021-10-01",
            "primary": "NA"
        },
        "2021-10-02": {
            "aqi": 33,
            "data_type": "history",
            "aqidate": "2021-10-02",
            "primary": "NA"
        },
        "2021-10-03": {
            "aqi": 24,
            "data_type": "history",
            "aqidate": "2021-10-03",
            "primary": "NA"
        },
        "2021-10-04": {
            "aqi": 32,
            "data_type": "history",
            "aqidate": "2021-10-04",
            "primary": "NA"
        },
        "2021-10-05": {
            "aqi": 20,
            "data_type": "history",
            "aqidate": "2021-10-05",
            "primary": "NA"
        },
        "2021-10-06": {
            "aqi": 33,
            "data_type": "history",
            "aqidate": "2021-10-06",
            "primary": "NA"
        },
        "2021-10-07": {
            "aqi": 20,
            "data_type": "history",
            "aqidate": "2021-10-07",
            "primary": "NA"
        },
        "2021-10-08": {
            "aqi": 24,
            "data_type": "history",
            "aqidate": "2021-10-08",
            "primary": "NA"
        },
        "2021-10-09": {
            "aqi": 55,
            "data_type": "history",
            "aqidate": "2021-10-09",
            "primary": "PM2.5"
        },
        "2021-10-10": {
            "aqi": 48,
            "data_type": "history",
            "aqidate": "2021-10-10",
            "primary": "NA"
        },
        "2021-10-11": {
            "aqi": 39,
            "data_type": "history",
            "aqidate": "2021-10-11",
            "primary": "NA"
        },
        "2021-10-12": {
            "aqi": 32,
            "data_type": "history",
            "aqidate": "2021-10-12",
            "primary": "NA"
        },
        "2021-10-13": {
            "aqi": 21,
            "data_type": "history",
            "aqidate": "2021-10-13",
            "primary": "NA"
        },
        "2021-10-14": {
            "aqi": 33,
            "data_type": "history",
            "aqidate": "2021-10-14",
            "primary": "NA"
        },
        "2021-10-15": {
            "aqi": 24,
            "data_type": "history",
            "aqidate": "2021-10-15",
            "primary": "NA"
        },
        "2021-10-16": {
            "aqi": 32,
            "data_type": "history",
            "aqidate": "2021-10-16",
            "primary": "NA"
        },
        "2021-10-17": {
            "aqi": 20,
            "data_type": "history",
            "aqidate": "2021-10-17",
            "primary": "NA"
        },
        "2021-10-18": {
            "aqi": 33,
            "data_type": "history",
            "aqidate": "2021-10-18",
            "primary": "NA"
        },
        "2021-10-19": {
            "aqi": 20,
            "data_type": "history",
            "aqidate": "2021-10-19",
            "primary": "NA"
        },
        "2021-10-20": {
            "aqi": 24,
            "data_type": "history",
            "aqidate": "2021-10-20",
            "primary": "NA"
        },
        "2021-10-21": {
            "aqi": 55,
            "data_type": "history",
            "aqidate": "2021-10-21",
            "primary": "PM2.5"
        },
        "2021-10-22": {
            "aqi": 48,
            "data_type": "history",
            "aqidate": "2021-10-22",
            "primary": "NA"
        },
        "2021-10-23": {
            "aqi": 20,
            "data_type": "history",
            "aqidate": "2021-10-23",
            "primary": "NA"
        },
        "2021-10-24": {
            "aqi": 33,
            "data_type": "history",
            "aqidate": "2021-10-24",
            "primary": "NA"
        },
        "2021-10-25": {
            "aqi": 20,
            "data_type": "history",
            "aqidate": "2021-10-25",
            "primary": "NA"
        },
        "2021-10-26": {
            "aqi": 24,
            "data_type": "history",
            "aqidate": "2021-10-26",
            "primary": "NA"
        },
        "2021-10-27": {
            "aqi": 55,
            "data_type": "history",
            "aqidate": "2021-10-27",
            "primary": "PM2.5"
        },
        "2021-10-28": {
            "aqi": 48,
            "data_type": "history",
            "aqidate": "2021-10-28",
            "primary": "NA"
        },
        "2021-10-29": {
            "aqi": 24,
            "data_type": "history",
            "aqidate": "2021-10-29",
            "primary": "NA"
        },
        "2021-10-30": {
            "aqi": 55,
            "data_type": "history",
            "aqidate": "2021-10-30",
            "primary": "PM2.5"
        },
        "2021-10-31": {
            "aqi": 48,
            "data_type": "history",
            "aqidate": "2021-10-31",
            "primary": "NA"
        },
    }
}

const symbolPass =
    'image://';
const symbolUp =
    'image://';
const symbolDown =
    'image://';

// AQI 等级
const AQI_LEVELS = [
  {
    icon: 'k1',
    label: '优',
    otherName: '一级',
    value: 1,
    min: 0,
    max: 50,
    color: '#00E500',
    lightColor: '#D2F5A5',
  },
  {
    icon: 'k2',
    label: '良',
    otherName: '二级',
    value: 2,
    min: 51,
    max: 100,
    color: '#FFFF00',
    lightColor: '#EBEBD8',
  },
  {
    icon: 'k3',
    label: '轻度',
    otherName: '三级',
    value: 3,
    min: 101,
    max: 150,
    color: '#FF7E00',
    lightColor: '#F2E1C7',
  },
  {
    icon: 'k4',
    label: '中度',
    otherName: '四级',
    value: 4,
    min: 151,
    max: 200,
    color: '#FE0000',
    lightColor: '#F3D3D3',
  },
  {
    icon: 'k5',
    label: '重度',
    otherName: '五级',
    value: 5,
    min: 201,
    max: 300,
    color: '#99004C',
    lightColor: '#E5D2ED',
  },
  {
    icon: 'k6',
    label: '严重',
    otherName: '六级',
    value: 6,
    min: 301,
    max: '+',
    color: '#7E0022',
    lightColor: '#F3CBD7',
  },
];

/**
 * @description 获取AQI等级
 * @params {number} value
 */
//  获取AQI等级
const getLevel = (value) => {
    let index = 0;
    if (!value || value <= 50) index = 0;
    if (value > 50 && value <= 100) index = 1;
    if (value > 100 && value <= 150) index = 2;
    if (value > 150 && value <= 200) index = 3;
    if (value > 200 && value <= 300) index = 4;
    if (value > 300) index = 5;
    return { index, ...AQI_LEVELS[index] };
};

// 获取渐变颜色范围
const colorRange = (startColor, endColor) => ({
    type: 'linear',
    x: -0.33,
    y: 0.5,
    colorStops: [
        { offset: 0, color: startColor }, // 0% 处的颜色
        { offset: 0.5, color: startColor },
        { offset: 0.5, color: endColor },
        { offset: 1, color: endColor }, // 100% 处的颜色
    ],
    global: false, // 缺省为 false
});

// 获取趋势
const getTrend = (history, forecast) => {
    if (history === null || forecast === null) return '';
    const historyLevel = getLevel(history);
    const forecastLevel = getLevel(forecast);
    if (historyLevel.label === forecastLevel.label) return '正确';
    return history < forecast ? '偏高' : '偏低';
};

// 获取趋势标记符号
const getSymbol = (history, forecast) => {
    const trend = getTrend(history, forecast);
    if (trend === '正确') return symbolPass;
    if (trend === '偏高') return symbolUp;
    if (trend === '偏低') return symbolDown;
    return '';
};

// 获取悬浮提示元素
const getTooltipRow = (params) => {
    return `
  <div style="display: flex; justify-content: space-between; min-width: 80px; padding-top: 3px;">
    <span style="${params.marker ? '' : 'padding-left: 18px'}">${params.marker || ''}</span>
    <span>${params.seriesName} ${params.value[2] || '-'}</span>
    <span style="padding-left: 15px">${params.value[1] ? '实况监测' : '模式预测'}</span>
  </div>`;
};

/**
 * @description 将接口数据转化为符合 echarts 的数据
 * @param {array} history 历史数据
 * @param {array} forecast 预测数据
 * @param {boolean} diff 是否按AQI等级拆分数据
 * @returns echartsData 符合echarts配置数据
 */
const transformData = (history, forecast, isDiff = true) => {
    const xAxisData = [...new Set([...Object.keys(history)])].sort();
    // const xAxisData = [...new Set([...Object.keys(history), ...Object.keys(forecast)])].sort();
    const yAxisData = ['模式预测', '实况监测'];

    let seriesDatas = [];
    const seriesData = [];
    const markPointData = [];

    for (let i = 0; i < xAxisData.length; i++) {
        for (let j = 0; j < yAxisData.length; j++) {
            const key = xAxisData[i];
            const historyValue = (history[key] || {}).aqi || null;
            const forecastValue = (forecast[key] || {}).aqi || null;
            seriesData.push([i, j, j ? historyValue : forecastValue]);
            if (j) {
                const symbol = getSymbol(historyValue, forecastValue);
                markPointData.push({
                    show: Boolean(symbol),
                    xAxis: i,
                    yAxis: 1,
                    symbolSize: 20,
                    symbol,
                });
            }
        }
    }
    // 按AQI等级区分数据
    if (isDiff) {
        seriesDatas = AQI_LEVELS.map(({ label, min, max, color }) => {
            const data = seriesData.filter(([, , value]) => {
                if (max === '+') return value >= min;
                return value >= min && value <= max;
            });
            return { name: label, data, color };
        });
    }

    return { xAxisData, yAxisData, seriesData, seriesDatas, markPointData };
};

// $.getJSON('https://www.makeapie.com/asset/get/s/data-1635390802457-HRSoVX4EN.json',(data)=>{
//     console.log(data)
// })

    const history= aqiData.history; 
    const forecast= aqiData.forecast;
    const { xAxisData, yAxisData, seriesDatas, markPointData } = transformData(history || {}, forecast || {});
    const myOption = {
        title: {
                    text: '污染等级 '
                  },
        grid: {
                    left: '5%',
                    right: '4%',
                    bottom: '12%',
                    top: '12%',
                    containLabel: true,
                    show: true,
                    border: true,
                    borderColor: '#000',
                    borderWidth: 1
                  },
        tooltip: {
            position: 'top',
            trigger: 'axis',
            formatter: (params) => {
                if (params.length !== 2) return '';
                const [paramsOne, paramsTwo] = params;
                const result = [];
                const dateStr = (paramsTwo || {}).axisValue || (paramsOne || {}).axisValue;
                if (dateStr) result.push(dateStr);
                const trendStr = paramsOne.value[1]
                    ? getTrend(paramsOne.value[2], paramsTwo.value[2])
                    : getTrend(paramsTwo.value[2], paramsOne.value[2]);
                if (trendStr) result.push(`&nbsp;&nbsp;&nbsp;&nbsp; ${trendStr}`);
                if (paramsOne.value[1]) {
                    if (paramsOne) result.push(getTooltipRow(paramsOne));
                    if (paramsTwo) result.push(getTooltipRow(paramsTwo));
                } else {
                    if (paramsTwo) result.push(getTooltipRow(paramsTwo));
                    if (paramsOne) result.push(getTooltipRow(paramsOne));
                }
                return result.join('');
            },
        },
        xAxis: {
                    type: 'category',
                    splitArea: {
                      show: true,
                    },
                    axisLine: {
                      show: false,
                    },
                    axisTick: { // 坐标刻线
                        show: false,
                    },
                    data: ['9/29', '9/30', '10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07', '10/08', '10/09', '10/10', '10/11', '10/12', '10/13', '10/14', '10/15', '10/16', '10/17', '10/18', '10/19', '10/20', '10/21', '10/22', '10/23', '10/24', '10/25', '10/26', '10/27', '10/28'],
                  },
        yAxis: [
            {
                type: 'category',
                data: yAxisData,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
            },
            {
                type: 'value',
            },
        ],
        legend: {
            show: true,
            icon: 'circle',
            bottom: 0,
        },
        visualMap: [
            {
                show: false,
                type: 'piecewise',
                pieces: [
                    ...AQI_LEVELS.map((v) => ({
                        lt: v.max,
                        gte: v.min,
                        color: v.color,
                    })),
                    {
                        value: AQI_LEVELS[0].max,
                        color: colorRange(AQI_LEVELS[0].color, AQI_LEVELS[1].color),
                    },
                    {
                        value: AQI_LEVELS[1].max,
                        color: colorRange(AQI_LEVELS[1].color, AQI_LEVELS[2].color),
                    },
                    {
                        value: AQI_LEVELS[2].max,
                        color: colorRange(AQI_LEVELS[2].color, AQI_LEVELS[3].color),
                    },
                    {
                        value: AQI_LEVELS[3].max,
                        color: colorRange(AQI_LEVELS[3].color, AQI_LEVELS[4].color),
                    },
                ],
            },
        ],
        series: [
            ...seriesDatas.map(({ name, data, color }) => ({
                name,
                data,
                type: 'heatmap',
                label: {
                    show: true,
                },
                itemStyle: {
                    color,
                    borderWidth: 5,
                    borderColor: '#fff',
                },
            })),
            {
                type: 'line',
                color: '#41C15A',
                markPoint: {
                    symbolOffset: [0, -35],
                    data: markPointData,
                },
            },
        ],
    };
    myChart.setOption(myOption);
